<template>
  <my-container>
    <template #header>
      <el-form class="ad-form-query" :inline="true" @submit.native.prevent>
        <el-form-item>
          <my-search :fields="fields" @click="onSearch" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onsearchWindowVisible">高级查询</el-button>
        </el-form-item>
      </el-form>
    </template>

    <el-table
      v-loading="listLoading"
      :data="list"
      highlight-current-row
      height="'100%'"
      style="width: 100%;height:100%;"
    >
      <el-table-column prop="createdUserName" label="操作账号" width="150">
        <template #default="{row}">
          {{ row.createdUserName }}-{{ row.nickName }}
        </template>
      </el-table-column>
      <el-table-column prop="ip" label="IP地址" width="130" />
      <el-table-column prop="apiLabel" label="操作名称" width="" />
      <el-table-column prop="apiPath" label="操作接口" width="" />
      <!-- <el-table-column prop="browser" label="浏览器" width="100" />
      <el-table-column prop="os" label="操作系统" width="100" /> -->
      <!-- <el-table-column prop="elapsedMilliseconds" width="70">
        <template #header>
          耗时<br>毫秒
        </template>
      </el-table-column> -->
      <el-table-column prop="elapsedMilliseconds" label="耗时(毫秒)" width="100" />
      <el-table-column prop="status" label="操作状态" width="80">
        <template #default="{row}">
          <el-tag
            :type="row.status ? 'success' : 'danger'"
            disable-transitions
          >{{ row.status ? '成功' : '失败' }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="msg" label="操作消息" /> -->
      <el-table-column prop="createdTime" label="操作时间" :formatter="formatCreatedTime" width />
    </el-table>

    <template #footer>
      <my-pagination
        ref="pager"
        :total="total"
        @get-page="getList"
      />
    </template>

    <!--高级查询窗口-->
    <my-search-window
      :visible.sync="searchWindowVisible"
      :fields="fields"
      :modal="false"
      @click="onSearchFilter"
    />
  </my-container>
</template>

<script>
import { formatTime } from '@/utils'
import { getOprationLogPage } from '@/api/admin/opration-log'
import MyContainer from '@/components/my-container'
import MySearch from '@/components/my-search'
import MySearchWindow from '@/components/my-search-window'

export default {
  name: 'OprationLog',
  components: { MyContainer, MySearch, MySearchWindow },
  data() {
    return {
      // 高级查询字段
      fields: [
        { value: 'CreatedUserName', label: '用户名', default: true },
        { value: 'nickName', label: '昵称', type: 'string' },
        { value: 'IP', label: 'IP地址', type: 'string' },
        { value: 'ApiLabel', label: '操作名称', type: 'string' },
        { value: 'createdTime', label: '操作时间', type: 'date', operator: 'daterange',
          config: { type: 'datetimerange', format: 'yyyy-MM-dd HH:mm', valueFormat: 'yyyy-MM-dd HH:mm' }
        }
      ],
      searchWindowVisible: false,
      dynamicFilter: null,

      list: [],
      total: 0,
      listLoading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    formatCreatedTime: function(row, column, time) {
      return formatTime(time, 'YYYY-MM-DD HH:mm:ss')
    },
    onSearch(dynamicFilter) {
      this.$refs.pager.setPage(1)
      this.dynamicFilter = dynamicFilter
      this.getList()
    },
    // 高级查询显示
    onsearchWindowVisible() {
      this.searchWindowVisible = true
    },
    // 高级查询
    onSearchFilter(dynamicFilter) {
      this.$refs.pager.setPage(1)
      this.dynamicFilter = dynamicFilter
      this.getList()
      this.searchWindowVisible = false
    },
    // 获取列表
    async getList() {
      const pager = this.$refs.pager.getPager()
      const para = {
        ...pager,
        dynamicFilter: this.dynamicFilter
      }
      this.listLoading = true
      const res = await getOprationLogPage(para)
      this.listLoading = false

      if (!res?.success) {
        return
      }

      this.total = res.data.total
      const data = res.data.list
      data.forEach(d => {
        d._loading = false
      })
      this.list = data
    }
  }
}
</script>
